<template>
  <view class="crash-feedback-submit">
    <bg-set background="#f2f3f7" />
    <view class="crash-feedback-submit__main">
      <view class="description-part">
        <view class="description-message">问题 描述</view>
        <view class="description-input">
          <van-field
            v-model="message"
            rows="3"
            autosize
            type="textarea"
            placeholder="请填写10个字以上的问题描述以便我们提供更好的帮助"
            maxlength="200"
            show-word-limit
          />
        </view>
      </view>
      <view class="crash-images-part f fd-col">
        <view class="header f jc-sb"
          ><text>图片 (提供问题截图)</text
          ><text>{{ fileList.length }}/4</text></view
        >
        <view class="body">
          <van-uploader v-model="fileList" multiple :max-count="4" />
        </view>
      </view>
      <view class="crash-detail-part f fd-col">
        <view
          class="f ai-c"
          style="border-bottom: 1rpx solid #ddd; height: 60rpx"
        >
          <text>故障时间</text>
          <uni-datetime-picker
            type="datetime"
            return-type="string"
            :border="false"
            :start="minDate"
            :end="maxDate"
            :clear-icon="false"
            :value="currentDateFormat"
            :hide-second="true"
            @change="changeDateTimePicker"
        /></view>
        <view class="f f1 ai-fs" style="margin-top: 20rpx">
          <uni-forms ref="form" :rules="rules" :modelValue="formData">
            <uni-forms-item label="联系电话" name="phoneNumber"
              ><uni-easyinput
                v-model="formData.userPhone"
                :inputBorder="false"
                :clearable="false"
                placeholder="方便我们与你联系"
                trim="both"
            /></uni-forms-item>
          </uni-forms>
        </view>
      </view>
      <view class="footer-part">
        <view class="message">
          <text style="color: #999"
            >为了便于开发者及时、高效地为你解决问题，提交反馈需同意向商户提供你的用户标识以及你的反馈内容</text
          >
        </view>
        <view class="button">
          <van-button type="primary" size="large" @click="submitCrashFeedback"
            >同意并提交</van-button
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import profileAPI from "/api/modules/profile";
import { formatDate, getValueFromUrl } from "/utils/index";
export default {
  name: "crash-feedback-submit",
  data() {
    return {
      message: "",
      fileList: [],
      crashType: "",
      isCorrectFormatPhoneNumber: true,
      formData: {
        userPhone: "",
      },
      rules: {
        phoneNumber: {
          rules: [
            {
              required: true,
              errorMessage: "手机号码不能为空",
            },
            {
              validateFunction: (rule, value, data, callback) => {
                // 异步需要返回 Promise 对象
                return new Promise((resolve, reject) => {
                  const reg = /^1[3|4|5|7|8]\d{9}$/;
                  setTimeout(() => {
                    if (value === "" || reg.test(value)) {
                      // 通过返回 resolve
                      resolve();
                    } else {
                      // 不通过返回 reject(new Error('错误信息'))
                      this.isCorrectFormatPhoneNumber = false;
                      reject(new Error("手机号格式错误，请重新输入"));
                    }
                  }, 0);
                });
              },
            },
          ],
        },
      },
      currentDate: new Date(),
      currentDateFormat: "",
      minDate: new Date(new Date().getFullYear(), 0, 1).getTime(),
      maxDate: new Date().getTime(),
    };
  },
  created() {
    this.currentDateFormat = this.getCurrentTimeFormat(this.currentDate);
    // 获取crashType
    const href = window.location.href;
    this.crashType = getValueFromUrl(href, "crashType");
  },
  methods: {
    getCurrentTimeFormat(date) {
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    },
    changeDateTimePicker(time) {
      this.currentDateFormat = time;
    },
    submitCrashFeedback() {
      if (this.message === "") {
        uni.showToast({
          title: "描述信息未传递",
          icon: "none",
          position: "top",
          duration: 2000,
        });
        return;
      }
      this.$refs.form
        .validate()
        .then((res) => {
          const params = {
            userPhone: this.formData.userPhone,
            crashType: this.crashType,
            desc: this.message,
            crashTime: this.currentDateFormat,
            contents: JSON.stringify(this.fileList.map((item) => item.content)),
          };
          profileAPI
            .insertCrashFeedback(params)
            .then((res) => {
              uni.showToast({
                title: "提交成功",
                icon: "success",
                position: "top",
                duration: 2000,
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch((err) => {
          console.log("表单错误信息：", err);
        });
    },
  },
};
</script>
<style lang='scss' scoped>
.crash-feedback-submit {
  width: 100%;
  height: 100vh;
  &__main {
    width: 100%;
    .description-part {
      .description-message {
        padding: 20rpx;
        box-sizing: border-box;
      }
      .description-input {
        ::v-deep .van-field {
          padding-left: 20rpx;
          .van-field__control {
            font-size: 36rpx;
          }
        }
      }
    }
    .crash-images-part {
      margin-top: 30rpx;
      padding: 20rpx;
      height: 220rpx;
      background-color: #fff;
      .body {
        margin-top: 20rpx;
      }
    }
    .crash-detail-part {
      margin-top: 30rpx;
      padding: 20rpx;
      height: 220rpx;
      background-color: #fff;
      box-sizing: border-box;
      ::v-deep .uni-date-x {
        background-color: transparent;
        .uniui-calendar {
          font-size: 0 !important;
        }
      }
      ::v-deep .uni-forms {
        .label-text {
          font-size: 30rpx;
          color: #000;
        }
        .uni-input-placeholder {
          font-size: 30rpx;
        }
        .uni-error-message-text {
          margin-left: 15rpx;
        }
      }
    }
    .footer-part {
      margin-top: 50rpx;
      padding: 20rpx;
      box-sizing: border-box;
      .button {
        margin-top: 80rpx;
      }
    }
  }
}
</style>